<template>
  <div>
    <bread first="商品管理"
           second="分类参数"></bread>
    <el-card>
      <el-alert el-icon-warning-outline
                title="注意：只允许为第三级分类设置相关参数！"
                type="warning"
                show-icon>
      </el-alert>

      <!-- 级联选择器 -->
      <div style="margin: 20px  0;">
        <span>选择商品分类：</span>
        <el-cascader v-model="value"
                     :options="options"
                     :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name'
                     }"
                     @change="handleChange"></el-cascader>
      </div>

      <!-- 标签页 -->

      <el-tabs v-model="tabValue"
               type="border-card"
               @tab-click="tabClick">

        <el-tab-pane name="many"
                     label="动态参数">
          <el-button :disabled="disabledFlag"
                     @click="dialogFormVisible = true"
                     type="primary">添加参数</el-button>
          <!-- 参数表格 -->
          <el-table border
                    :data="tableData"
                    style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scoped">
                <el-tag :key="index"
                        v-for="(tag,index) in scoped.row.attr_vals.split(',').filter(item=>item!='')"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-new-tag"
                          v-if="scoped.row.inputVisible"
                          v-model="scoped.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm"
                          @blur="handleInputConfirm ($event,scoped.row)">
                </el-input>
                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scoped.row)">+ New Tag</el-button>
              </template>

            </el-table-column>
            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 参数表格 -->
        </el-tab-pane>

        <el-tab-pane name='only'
                     label="静态属性">
          <el-button @click="dialogFormVisible1 = true"
                     type="primary">添加属性</el-button>
          <!-- 属性表格 -->
          <el-table border
                    :data="tableData"
                    style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scoped">
                <el-tag :key="index"
                        v-for="(tag,index) in scoped.row.attr_vals.split(',').filter(item=>item!='')"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-new-tag"
                          v-if="scoped.row.inputVisible"
                          v-model="scoped.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm"
                          @blur="handleInputConfirm ($event,scoped.row)">
                </el-input>
                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scoped.row)">+ New Tag</el-button>
              </template>

            </el-table-column>
            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 属性表格 -->
        </el-tab-pane>
      </el-tabs>
    </el-card>

     
    <!--显示的 动态参数的对话框 -->
    <el-dialog title="添加动态参数"
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               :rules="rules">
        <el-form-item label="动态属性"
                      prop="name"
                      :label-width="formLabelWidth">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

<!-- 显示静态属性的对话框 -->
  <el-dialog title="添加静态属性"
               :visible.sync="dialogFormVisible1">
      <el-form :model="form"
               :rules="rules">
        <el-form-item label="静态属性"
                      prop="name"
                      :label-width="formLabelWidth">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
		
  </div>
</template>
           
<script>
import { goodsCateApi, paramsApi, addParamsAttrApi } from '@/api'
export default {
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      //对话框
      dialogFormVisible: false,
			dialogFormVisible1: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      value: [],
      options: [],
      tableData: [],

      paramsObj: {
        type: 3
      },
      manyDate: [],
      tabValue: 'many',

      // tag
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',

    };
  },
  created () {
    this.getCates()
  },
  computed: {
    disabledFlag () {
      return this.value.length == 3 ? false : true
    }
  },
  methods: {
    handleChange (value) {
      // 点击了级联选择器 并选择了 才触发
      if (this.value.length !== 3) {
        //  清空value值
        this.value = []
      } else {
        //  表示选择的是第三级  或者：数组的长度=3
        this.getManyData()

      }

    },
    //  点击标签页 -->
    tabClick () {
      console.log(111111);
      //  判断是否选择了第三项
      if (this.value.length == 3) {
        this.getManyData()
      }

    },

    /* 获取分类数据列表 */
    async getCates () {
      const res = await goodsCateApi(this.paramsObj)
      // console.log(res, 7777);
      this.options = res.data.data
    },
    /* 获取动态数据 */
    async getManyData () {
      const res = await paramsApi({ id: this.value[this.value.length - 1], sel: this.tabValue })
      // console.log(res, 1231);
      res.data.data.forEach(item => {
        item.inputVisible = false
        item.inputValue = ''
      })
      this.tableData = res.data.data
    },

    // tags
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput (row) {
      row.inputVisible = true;

      this.$nextTick(() => {
        //等待第一次dom结构更新完毕后 在执行
        this.$refs.saveTagInput.focus(); //聚焦
      })
    },

    async handleInputConfirm (e, row) {
      if (!row.inputValue) {
        return false; //表单中没有值 不需要发送请求
      }
      // console.log(row, 888);
      //   1-获取表单值
      //    2-发送请求传入参数 
      //       2.1判断表单是否有值 有值就发送请求没有值就不发请求
      //    3-表单隐藏 表单值清空
      // 		4-刷新页面
      var attrVal = row.attr_vals ? row.attr_vals.split(',') : [] //判断是否有值
      attrVal = [...attrVal, row.inputValue].join(',')

      const res = await addParamsAttrApi({
        id: this.value[this.value.length - 1],
        attr_name: row.attr_name,
        attrId: row.attr_id,
        attr_sel: this.tabValue,
        attr_vals: attrVal
      })
      // console.log(res);
      //刷新页面 添加完成 立马显示
      row.attr_vals = attrVal
      // 表单隐藏 
      row.inputVisible = false,
        // 表单清空  
        row.inputValue = '';
    }

  }
};
</script>
<style lang='less'  scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
